import QtQuick 2.0
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Dialogs 1.3
import QtWebEngine 1.5
import ClockController 1.0
import QtGraphicalEffects 1.0
import '../../labels'
import '../../widget'

StackPage {
    id:window
    tabsVisible: false
    property string time
    property string place

    ClockController{
        id:clockController
    }

    Connections{
        target:clockButton
        onClicked:{
            clockController.userId = settings.value("user/pid","0");
            clockController.place = window.place
            clockController.fileUrl = fileImage.source
            clockController.slot_clock_req()
        }
    }

    Connections{
        target: clockController
        onSig_req_success:{
            console.log("success")
            window.toTop("qrc:/work/clock/Clock.qml")
        }
        onSig_req_error:{
            console.log(msg)
        }
    }

    FileDialog {
        id: fileDialog
        title: "Please choose a file"
        folder: shortcuts.home
        onAccepted: {
            console.log("You chose: " + fileDialog.fileUrl)
            fileImage.source = fileDialog.fileUrl
        }
        onRejected: {
            console.log("Canceled")
        }
    }

    ColumnLayout{
        anchors.fill:parent
        spacing: 15

        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 40

            ReturnImg{
                onClicked: {
                    window.pop();
                }
            }

            TitleLabel {
                text: qsTr("签到")
                anchors.fill: parent
            }
        }

        GridLayout{
            Layout.leftMargin: 20
            Layout.fillWidth: true
            Layout.preferredHeight: 80
            Layout.alignment: Qt.AlignVCenter
            columns: 3
            rows: 2
            columnSpacing: 0
            rowSpacing: 0

            Image{

                source:"qrc:/img/work-clock-stat-tab.png"
                sourceSize: Qt.size(15,15)
                Layout.preferredHeight: 15
                Layout.preferredWidth: 15
                ColorOverlay{
                    anchors.fill:parent
                    source:parent
                    color:"#B6B6B6"
                }
            }

            ContentLabel{
                Layout.preferredHeight: 15
                Layout.preferredWidth: 60
                text:'签到时间'
            }

            ContentLabel{
                text:window.time
                horizontalAlignment: Text.AlignLeft
                Layout.fillWidth:true
            }

            Image{
                source:"qrc:/img/work-clock-tab.png"
                sourceSize: Qt.size(15,15)
                Layout.preferredHeight: 15
                Layout.preferredWidth: 15
                ColorOverlay{
                    anchors.fill:parent
                    source:parent
                    color:"#B6B6B6"
                }
            }

            ContentLabel{
                text:'签到地点'
                Layout.preferredHeight: 15
                Layout.preferredWidth: 60
            }

            ContentLabel{
                text:window.place
                Layout.fillWidth: true
                horizontalAlignment: Text.AlignLeft
            }

        }

        Rectangle{
            Layout.preferredHeight: 200
            Layout.fillWidth: true

            ContentLabel{
                text:"请填写正确信息"
                horizontalAlignment: Text.AlignLeft
                width:150
                height:50
                anchors{
                    left:parent.left
                    leftMargin: 20
                    top:parent.top
                    topMargin: 20
                }
            }

            Canvas{

                onPaint:{
                    var ctx = getContext("2d")

                    drawOnce(ctx,0,0,75,0)
                    drawOnce(ctx,75,0,75,75)
                    drawOnce(ctx,75,75,0,75)
                    drawOnce(ctx,0,75,0,0)

                    ctx.lineJoin='round'
                    ctx.lineWidth=5
                    ctx.strokeStyle='#eaeaea'
                    ctx.stroke()
                }

                function drawOnce(ctx,sx,sy,ex,ey){
                    var x = sx;
                    var y = sy;
                    var stepX = ex-sx;
                    var stepY = ey-sy;

                    if(stepX ==0){
                        stepX = 0
                    }else if(stepX >0){
                        stepX = 1
                    }else{
                        stepX = -1
                    }

                    if(stepY ==0){
                        stepY = 0
                    }else if(stepY >0){
                        stepY = 1
                    }else{
                        stepY = -1
                    }

                    do{
                        ctx.moveTo(x,y)
                        ctx.lineTo(x+(stepX*3),y+(stepY*3))
                        x += stepX*5
                        y += stepY*5

                    }while(x*stepX<= ex*stepX&&y*stepY<=ey*stepY)
                }

                width:75
                height:75
                anchors{
                    left:parent.left
                    leftMargin: 20
                    bottom:parent.bottom
                    bottomMargin: 20
                }

                BorderImage{
                    anchors.fill:parent
                    z:parent.z-2
                    source:"qrc:/img/photo.png"
                }

                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        fileDialog.visible = true
                    }
                }

                Image{
                    id:fileImage
                    anchors.fill:parent
                    z:parent.z-1
                }
            }
        }

        Rectangle{
            Layout.fillWidth: true
            Layout.fillHeight: true
        }

        HandButton{
            id:clockButton
            Layout.fillWidth: true
            Layout.preferredHeight: 50
        }

    }


}
